/*#region Root*/
:root {
    --black: #1f2937;
    --white: #fff;
    --purple: #6100d9;
    --fresh-green: #d3e460;
    --light-blue: #e4e5e8;
    --gray: #e9edf2;
    --border: 1px solid #cacaca;
    --popup-bg: #0000004f;
}

* {
    font-family: "Mona Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    border: 0;
    color: var(--black);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

p {
    font-size: 14px;
    line-height: 22px;
}

html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

body {
    background: var(--gray);
}
/*#endregion */

/*#region header*/

header {
    position: fixed;
    width: 90vw;
    left: 5vw;
    top: 12px;
    z-index: 100;
}

    header > div {
        background: var(--white);
        display: grid;
        height: 75px;
        padding: 1rem 2rem;
        border-radius: 48px;
        gap: 1rem;
        align-items: center;
        grid-template-columns: 130px 1fr;
        max-width: 1700px;
        margin: auto;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

        header > div > a {
            display: flex;
        }

nav {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

    nav > svg {
        width: 31px;
        background: var(--gray);
        border-radius: 10px;
        padding: 6px;
        cursor: pointer;
        display: none;
    }

    nav > div {
        display: flex;
        align-items: center;
        justify-content: end;
        height: 100%;
    }

        nav > div > a {
            white-space: nowrap;
        }

            nav > div > a:not(a:nth-last-child(2),a:last-of-type) {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 14px;
                border-radius: 13px;
                transition: 50ms;
                font-size: 14px;
            }

            nav > div > a:hover:not(a:nth-last-child(2),a:last-of-type) {
                transform: scale(1.05);
            }

            nav > div > a:nth-last-child(2) {
                background: var(--gray);
                color: var(--black);
                height: 100%;
                border-radius: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 14px;
                font-size: 14px;
                margin: 0 8px 0 5px;
            }

            nav > div > a:last-of-type {
                background: var(--black);
                color: var(--white);
                height: 100%;
                border-radius: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 14px;
                font-size: 14px;
            }
/*#endregion */

/*#region Banner*/



#banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #banner > div {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1700px;
        padding: 5rem;
        margin: auto;
        gap: 1rem;
        min-height: 100vh
    }

        #banner > div > img {
            width: 50%;
            object-fit: contain;
            height: auto;
            max-height: 500px;
            border-radius: 12px;
        }

        #banner > div > div {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

            #banner > div > div > h1 {
                color: var(--purple);
                font-weight: bolder;
                font-size: 4rem;
                font-family: "Poetsen One", sans-serif;
                line-height: 65px;
            }

            #banner > div > div > p {
                font-size: 1rem;
                line-height: 26px;
            }

/*#endregion */

/*#region banner*/

.banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .banner > div {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1700px;
        padding: 5rem;
        margin: auto;
        gap: 1rem;
    }


        .banner > div > img {
            width: 50%;
            object-fit: contain;
            height: auto;
            max-height: 500px;
            border-radius: 12px;
        }

        .banner > div > div {
            width: 50%;
        }


/*#endregion */

/*#region banner2*/
#banner-2 {
    background: var(--white);
}

    #banner-2 > div > div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        #banner-2 > div > div > h2 {
            font-weight: bold;
            font-size: 2.3rem;
            font-family: "Poetsen One", sans-serif;
        }

        #banner-2 > div > div > p {
            color: #1e2330;
            font-size: 1rem;
            line-height: 26px;
        }

        #banner-2 > div > div > a {
            background: var(--purple);
            color: var(--white);
            height: 50px;
            border-radius: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 14px;
            font-size: 14px;
            width: 170px;
        }

/*#endregion */

/*#region banner3*/
#banner-3 > div > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    #banner-3 > div > div > h3 {
        font-weight: bold;
        font-size: 2.3rem;
        font-family: "Poetsen One", sans-serif;
    }

    #banner-3 > div > div > p {
        font-size: 1rem;
        line-height: 26px;
    }

    #banner-3 > div > div > a {
        background: var(--white);
        color: var(--black);
        height: 50px;
        border-radius: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        font-size: 14px;
        width: 170px;
    }

/*#endregion */

/*#region sss*/
#sss {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    padding: 5rem;
    margin: auto;
    gap: 1rem;
}

    #sss > h3 {
        font-weight: bold;
        font-size: 2.3rem;
        font-family: "Poetsen One", sans-serif;
        margin-bottom: 2rem;
        color: var(--purple);
        text-align: center;
    }

    #sss > div {
        background: var(--white);
        border-radius: 17px;
        overflow: hidden;
        width: 100%;
    }

        #sss > div > button {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 21px;
            background: transparent;
            border-bottom: 1px solid var(--gray);
            cursor: pointer;
            font-size: 17px;
            font-weight: 600;
            text-align: start;
        }

            #sss > div > button > svg {
                transition: 300ms;
            }

        #sss > div > p {
            display: flex;
            width: 100%;
            padding: 0;
            font-size: 1rem;
            line-height: 26px;
            height: 0;
            transition: 300ms;
        }

        #sss > div.active > button > svg {
            transform: rotate(180deg);
        }

        #sss > div.active > p {
            padding: 21px;
            height: max-content;
        }

        #sss > div#note {
            border: 1px solid var(--purple);
            padding: 21px;
            font-size: 17px;
            font-weight: 600;
            background: #6100d91c;
        }

/*#endregion */

/*#region who-are-we*/
#who-are-we {
    background: var(--white);
    padding: 4rem 0;
}

    #who-are-we > div {
        position: relative;
        width: 79%;
        height: 100%;
        align-items: center;
        max-width: 844px;
        padding: 3rem;
        margin: auto;
        background: var(--purple);
        border-radius: 17px;
    }

        #who-are-we > div > h4 {
            font-weight: bold;
            font-size: 2rem;
            color: var(--purple);
            background: var(--white);
            padding: 5px 19px;
            border-radius: 9px;
            width: max-content;
            font-family: "Poetsen One", sans-serif;
        }

        #who-are-we > div > p {
            color: var(--white);
            font-size: 1rem;
            line-height: 26px;
            margin: 23px 0px;
        }

            #who-are-we > div > p:last-of-type {
                margin-bottom: 0;
            }

            #who-are-we > div > p > a {
                color: var(--white);
                text-decoration: underline;
            }



        #who-are-we > div > span {
            position: absolute;
            overflow: hidden;
            width: 150px;
            height: 150px;
            top: -10px;
            right: -10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #who-are-we > div > span::before {
                content: 'Teşekkürler';
                position: absolute;
                width: 150%;
                height: 40px;
                background: var(--fresh-green);
                transform: rotate(45deg) translateY(-20px);
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--black);
                font-weight: 600;
                letter-spacing: 0.1em;
                box-shadow: 0 5px 10px rgba(0,0,0,0.23);
            }

            #who-are-we > div > span::after {
                content: '';
                position: absolute;
                width: 10px;
                bottom: 0;
                right: 0;
                height: 10px;
                z-index: -1;
                box-shadow: -140px -140px #cc3f47;
                background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
            }

/*#endregion */

/*#region instagram*/
#instagram {
    width: 100%;
    display: flex;
    background: black;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    #instagram > img {
        width: 350px;
    }

/*#endregion */

/*#region footer*/
footer {
    background: var(--white);
    border-top: 1px solid var(--gray);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    flex-direction: column;
}

    footer > div:first-of-type > svg {
        width: 22px;
    }
    footer > div:last-of-type > a {
        font-size: 12px;
    }
/*#endregion */

/*#region Blog*/

#blog {
    background-image: url(../../img/web/blog-bg.png);
    padding: 7rem 5rem;
    background-attachment: fixed;
    position: relative;
    background-size: cover;
    background-position: center;
    margin-top: 4rem;
}

    #blog::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgb(0 0 0 / 44%);
        z-index: 1;
        pointer-events: none;
    }

    #blog > div {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 1700px;
        margin: auto;
        gap: 10px;
        background: var(--white);
        padding: 2rem;
        border-radius: 20px;
    }

        #blog > div > h5 {
            font-weight: bold;
            font-size: 2.3rem;
            font-family: "Poetsen One", sans-serif;
            margin-bottom: 2rem;
            color: var(--purple);
            text-align: center;
        }

        #blog > div > p {
            font-size: 1rem;
            line-height: 26px;
            text-align: center;
        }

            #blog > div > p:last-of-type {
                background: var(--gray);
                padding: 7px 15px;
                border-radius: 8px;
            }
/*#endregion */

/*#region template-continer*/
#template-continer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
}

    #template-continer > div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 1700px;
        padding: 5rem;
        margin: auto;
        gap: 1rem;
    }

        #template-continer > div > h5 {
            font-weight: bold;
            font-size: 2.3rem;
            font-family: "Poetsen One", sans-serif;
            text-align:center;
        }

        #template-continer > div > p {
            font-size: 1rem;
            line-height: 26px;
            text-align: center;
            margin-bottom: 2rem;
        }

        #template-continer > div > div {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
            gap: 1rem;
            width: 100%;
            margin: 0 auto;
        }

            #template-continer > div > div > div {
                aspect-ratio: 9 / 15;
                border-radius: 18px;
                overflow: hidden;
                cursor: pointer;
                transition: 0.3s;
                position: relative;
                background-color: #f2f2f2;
                transition: 300ms;
            }

                #template-continer > div > div > div > img {
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                    display: block;
                    object-position: top;
                    transition: transform 0.5s ease;
                    will-change: transform;
                }


#load-more {
    background: var(--purple);
    color: var(--white);
    height: 50px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-size: 14px;
    width: 170px;
    cursor: pointer;
}

/*#endregion*/

/*#region Alert*/
#Alert {
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    padding: 1rem;
    background: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 1000;
    top: -100px;
    right: 50%;
    transform: translateX(50%);
    font-size: 13px;
    opacity: 0;
    animation: slideIn 0.5s ease forwards, slideOut 0.5s ease 2.5s forwards;
}

#AlertJS {
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    padding: 1rem;
    background: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 1000;
    top: -100px;
    right: 50%;
    transform: translateX(50%);
    font-size: 13px;
    opacity: 0;
    transition: top 0.7s ease, opacity 0.7s ease;
    text-align: center;
}

    #AlertJS > span,
    #Alert > span {
        text-align: center;
    }

.failed {
    background: #f6cfce !important;
}



.success {
    background: #d8f1d0 !important;
}

@keyframes slideIn {
    0% {
        top: -100px;
        opacity: 0;
    }

    100% {
        top: 13px;
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        top: 13px;
        opacity: 1;
    }

    100% {
        top: -100px;
        opacity: 0;
    }
}
/*#endregion*/

@media(max-width:1400px) {
}

@media(max-width:1200px) {
}

@media(max-width:992px) {
    #banner > div > div > h1 {
        font-size: 2.5rem;
        line-height: 47px;
    }
}

@media(max-width:768px) {

    #banner > div {
        flex-direction: column;
        padding-top: 8rem;
        gap: 3rem;
    }

        #banner > div > div,
        #banner > div > img {
            width: 100%;
        }

    .banner > div {
        flex-direction: column;
        gap: 3rem;
    }

        .banner > div > div,
        .banner > div > img {
            width: 100%;
        }

        .banner > div > div {
            order: -1;
        }

    #banner > div > div > h1 {
        font-size: 3.5rem;
        line-height: 60px;
    }

    #banner-2 > div > div > h2 {
        font-size: 2.6rem;
    }

    nav > div {
        position: absolute;
        -webkit-user-select: none;
        user-select: none;
        z-index: 11;
        background: var(--white);
        width: auto;
        padding: 5px 0;
        border-radius: 11px;
        border: var(--border);
        display: flex;
        flex-direction: column;
        visibility: hidden;
        transition: transform .1s ease, opacity .2s ease, visibility .2s ease, top .2s ease, right .2s ease;
        top: 28px;
        right: -13px;
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        height: max-content;
        padding: 1rem;
        opacity: 0;
        transform: scale(.75);
        visibility: hidden;
    }

        nav > div::before {
            content: "";
            position: absolute;
            width: 13px;
            height: 13px;
            border-top: var(--border);
            border-left: var(--border);
            right: 12px;
            transform: rotate(45deg);
            background: var(--white);
            top: -7.3px;
        }

        nav > div.active {
            top: 45px;
            right: -5px;
            transform: scale(1);
            opacity: 1;
            visibility: visible;
        }

        nav > div > a {
            height: 38px !important;
            width: 100%;
        }

            nav > div > a:nth-last-child(2) {
                margin: 10px;
            }

            nav > div > a:last-of-type, nav > div > a:nth-last-child(2) {
                height: 46px !important;
            }

    nav > svg {
        display: block;
    }
}

@media(max-width:576px) {
    header > div {
        height: 62px;
        grid-template-columns: 109px 1fr;
    }

    #banner > div {
        padding: 8rem 32px 5rem 32px;
    }

    #hand-animate > img {
        width: 128px;
    }

    .banner > div,
    #hand-animate,
    #blog,
    #sss,
    #template-continer > div {
        padding: 5rem 32px;
    }

    #banner > div > div > h1 {
        font-size: 2.5rem;
        line-height: 43px;
    }

    #banner-2 > div > div > h2,
    #blog > div > h5,
    #sss > h3 {
        font-size: 2.2rem;
    }

    #hand-animate > span > span {
        font-size: 33px;
    }

    #hand-animate > svg {
        width: 125px;
    }

    #who-are-we > div {
        width: 89%;
        padding: 2rem 32px;
    }
}